<div class="flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0">
  <div class="relative shrink-0">
    <emoji-avatar [avatar]="toolset().avatar" large class="rounded-xl shadow-sm overflow-hidden" />
  </div>
  <div class="grow w-0 py-[1px]">
    <div class="flex items-center text-base leading-5 font-semibold text-gray-800">
      <div class="truncate" [title]="toolset().name">{{toolset().name}}</div>
    </div>
    <div class="flex items-center text-xs leading-[18px] text-gray-500 font-medium">
      <div class="truncate">{{'PAC.KEY_WORDS.By' | translate: {Default: 'By'} }}&nbsp;{{toolset().createdBy | user}}</div>
    </div>
  </div>
</div>

@if (!inline()) {
  <div
    class="grow mb-2 px-[14px] max-h-[72px] text-sm leading-normal text-gray-500 line-clamp-3 whitespace-pre-wrap group-hover:line-clamp-2 group-hover:max-h-[36px]"
    [title]="toolset().description | i18n"
  >
    {{toolset().description | i18n }}
  </div>
  <div class="flex items-center shrink-0 mt-1 pt-1 pl-[14px] pr-[6px] pb-[6px] h-[42px]">
  @if (tags()?.length) {
    <div class="relative w-full flex items-center gap-1 py-[7px] rounded-md text-gray-500" [title]="tagsTitle()">
      <svg
        width="14"
        height="14"
        viewBox="0 0 14 14"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        class="shrink-0 w-3 h-3"
        data-icon="Tag01"
      >
        <g id="Icon" clip-path="url(#clip0_17795_9693)">
          <path
            id="Icon_2"
            d="M4.66699 4.6665H4.67283M1.16699 3.03317L1.16699 5.6433C1.16699 5.92866 1.16699 6.07134 1.19923 6.20561C1.22781 6.32465 1.27495 6.43845 1.33891 6.54284C1.41106 6.66057 1.51195 6.76146 1.71373 6.96324L6.18709 11.4366C6.88012 12.1296 7.22664 12.4761 7.62621 12.606C7.97769 12.7202 8.35629 12.7202 8.70777 12.606C9.10735 12.4761 9.45386 12.1296 10.1469 11.4366L11.4371 10.1464C12.1301 9.45337 12.4766 9.10686 12.6065 8.70728C12.7207 8.35581 12.7207 7.9772 12.6065 7.62572C12.4766 7.22615 12.1301 6.87963 11.4371 6.1866L6.96372 1.71324C6.76195 1.51146 6.66106 1.41057 6.54332 1.33842C6.43894 1.27446 6.32514 1.22732 6.20609 1.19874C6.07183 1.1665 5.92915 1.1665 5.64379 1.1665L3.03366 1.1665C2.38026 1.1665 2.05357 1.1665 1.804 1.29366C1.58448 1.40552 1.406 1.58399 1.29415 1.80352C1.16699 2.05308 1.16699 2.37978 1.16699 3.03317ZM4.95866 4.6665C4.95866 4.82759 4.82808 4.95817 4.66699 4.95817C4.50591 4.95817 4.37533 4.82759 4.37533 4.6665C4.37533 4.50542 4.50591 4.37484 4.66699 4.37484C4.82808 4.37484 4.95866 4.50542 4.95866 4.6665Z"
            stroke="currentColor"
            stroke-width="1.25"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
        </g>
        <defs>
          <clipPath id="clip0_17795_9693"><rect width="14" height="14" fill="white"></rect></clipPath>
        </defs>
      </svg>

      @for (tag of tags(); track tag.id) {
        <tag [tag]="tag" xs />
      }
    </div>
  }
  </div>
}
